<template lang="html">
    <div id="index">
        <mt-videolist :videotype="videotype"></mt-videolist>
        <!-- <mt-scoll></mt-scoll> -->
        <!-- 公告栏目 -->
        <section class="publicity">
            <div class="publicity-box">
                <div class="publicity-title">
                    明厨亮灶 请您监督
                </div>
                <div class="publicity-dynamic">
                    <dl>
                        <dt>
                                                <img src="../../img/A.png" class="imgs" v-if="this.config_CreditLevelUnid=='A'">
                                                <img src="../../img/B.png" class="imgs" v-if="this.config_CreditLevelUnid=='B'">
                                                <img src="../../img/C.png" class="imgs" v-if="this.config_CreditLevelUnid=='C'">
                                                <img src="../../img/D.png" class="imgs" v-if="this.config_CreditLevelUnid=='D'">
                                                <!-- <img src="../../img/D.png" v-if="this.InfosData.lastYearEnterpriseLevel=='整改中'">
                                                <img src="../../img/E.png" v-if="this.InfosData.lastYearEnterpriseLevel=='未评级'"> -->
                                            </dt>
                        <dd>上年度综合等级</dd>
                    </dl>
                    <dl>
                        <dt>
                                                <img src="../../img/excellent.png" v-if="this.dynamicCreditLevelUnid=='优秀'">
                                                <img src="../../img/good.png" v-if="this.dynamicCreditLevelUnid=='良好'">
                                                <img src="../../img/commonly.png" v-if="this.dynamicCreditLevelUnid=='一般'">
                                                <img src="../../img/E.png" v-if="this.dynamicCreditLevelUnid=='未评定'">
                                                <img src="../../img/E.png" v-if="this.dynamicCreditLevelUnid==null">
                                                <!-- <img src="../img/D.png" v-if="this.Grade=='整改中'">
                                                <img src="../img/E.png" v-if="this.Grade=='未评级'"> -->
                                            </dt>
                        <dd>本次检查动态等级</dd>
                    </dl>
                </div>
                <div class="publicity-standard">
                    <dl>
                        <dt><img src="../../img/excellent.png"></dt>
                        <dd class="excellent">A<span>(优秀)</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="../../img/good.png"></dt>
                        <dd class="good">B<span>(良好)</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="../../img/commonly.png"></dt>
                        <dd class="commonly">C<span>(一般)</span></dd>
                    </dl>
                </div>
            </div>
        </section>
        <el-collapse accordion v-model="activeNames">
            <!-- 单位资质  1278显示 其余不显示  -->
            <el-collapse-item name="1" v-if='this.economicType==1||this.economicType==2||this.economicType==7||this.economicType==8'>
                <template slot="title">
                        <img src="../../img/icon1.png"> 单位资质
</template>
                    <div class="Unit_qualiy">
                            <ul>
                                <li class="unit_title">企业名称：<label>{{this.InfosData.name}}</label></li>
                                <li>生产地址：<label>{{this.InfosData.businessAddress}}</label></li>
                                <li>许可证号：<label>{{this.info.code}}</label></li>
                                <li>发证机关：<label>{{this.info.gov}}</label></li>
                                <li>核定经营项目：<label>{{this.info.beProject}}</label></li>
                                <li>日常监管责任机构：<label>{{this.info.govDepartmentname}}</label></li>
                                <li>日常监管责任人员：<label>{{this.info.institutionPersonName}}</label></li>
                                <li>许可期限<label>{{this.info.startDate|time}}-<span v-if='this.info.endDate!=null'>{{this.info.endDate|time}}</span></label></li>
                            </ul>
                        </div>
                        </el-collapse-item>
                        <!--   健康证公示 -->
                        <el-collapse-item  name="2" v-if='this.economicType==1||this.economicType==2||this.economicType==7||this.economicType==8'>
<template slot="title">
    <img src="../../img/icon2.png">
    健康证公示
</template>
                            <ul class="Health_certificate" v-if='this.PersonData!=null'>
                                                    <li v-for="item of PersonData">
                                                        <div class="Health_img" v-if="item.serverFullPath!=null">
                                                            <img :src="item.serverFullPath">
                                                        </div>
                                                        <div class="Health_content">
                                                            <p>
                                                                姓名：{{item.name}} 性别：{{item.sex}}
                                                            </p>
                                                            <p>健康证号：{{item.healthCode}}</p>
                                                            <P>身份证号：{{item.idCard}}</P>
                                                            <p>发证机关：{{item.issuingAuthority}}</p>
                                                            <p>有效截止日期:{{item.endDate}}</p>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <div class="none_data" v-else>
                                                    <img src="../../img/tip.png">
                                                </div>
                        </el-collapse-item>
                        <!--  添加剂公示  -->
                        <el-collapse-item name="3" v-if='this.economicType==1||this.economicType==2||this.economicType==7||this.economicType==8'>
<template slot="title">
    <img src="../../img/icon3.png">
    添加剂公示
</template>
                            <ul class="Additive" v-if='this.AdditivesData!=0'>
                            <li v-for='item of AdditivesData'>
                                <div class="Additive_content">
                                    <p>
                                        食品添加剂：{{item.manufacture}}
                                    </p>
                                    <p>备案号{{item.foodAdditives.recordNumber}}</p>
                                    <P>规格：{{item.standard}}</P>
                                    <p>生产厂家：{{item.manufacture}}</p>
                                    <p>添加剂添加量(规定量)：{{item.specifiedAmount}}</p>
                                    <p>添加剂使用量(使用量)：{{item.actualAmount}}</p>
                                    <p>使用日期:{{item.verificationDate|time}}</p>
                                </div>
                            </li>
                        </ul>
                          <div class="none_data" v-else>
                                                    <img src="../../img/tip.png">
                                                </div>
                        </el-collapse-item>
                        <!-- 食品安全相关知识  -->
                        <el-collapse-item name="4">
<template slot="title">
    <img src="../../img/icon4.png">
    食品安全相关知识
</template>
                            <ul class="Food_Safety"  v-if='this.FoodSafetyData!=0'>
                            <li v-for='item of FoodSafetyData' :key='item.unid'>
                                 <router-link :to='{name: "Notedetail",query:{unid:item.unid}}'>
                                    <div class="Food_Safety_content">
                                        <div class="Food_Safety_img" v-if="item.newsPicture!=null">
                                            <img :src="item.newsPicture.serverFullPath">
                                        </div>
                                        <div class="Food_Safety_text">
                                            <article>
                                                {{item.title}}
                                            </article>
                                            <time>{{item.versionDate}}</time>
                                        </div>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                         <div class="none_data" v-else>
                                                    <img src="../../img/tip.png">
                                                </div>
                </el-collapse-item>
                </el-collapse>
        <mt-footer></mt-footer>
    </div>
</template>

<script>
    import axios from 'axios';
    import Video from '@/components/videolist'
    import Footer from '@/components/footer'
    import {
        ConsumerTipsData,
        FoodAdditivesData,
        EnterprisePersonData,
        SingleEnterpriseCheckNumber,
        SingleEnterprise
    } from '../../api/api';
    export default {
        components: {
            'mt-videolist': Video,
            'mt-footer': Footer
        },
        data() {
            return {
                videotype:'',
                FoodSafetyData: [],
                AdditivesData: [],
                InfosData: [],
                PersonData: [],
                info: {
                    code: '',
                    beProject: '',
                    gov: '',
                    govDepartmentname: '',
                    institutionPersonName: '',
                    startDate: '',
                    endDate: '',
    
                },
    
                /* */
                config_CreditLevelUnid: '',
                dynamicCreditLevelUnid: '',
                activeNames: [],
                //activeNames: ['1'],
                economicType: ''
            };
        },
        created() {
         
            this.fetchDta()
            this.Infos()
            // sessionStorage.setItem('WapEnterpriseUnid', JSON.stringify({
            //     unid: '1415a4b5ec764e33ac38df0ce667b649'
            // }));
    
        },
        //方法
        methods: {
            fetchDta() {
                var _this = this
                var unid = this.$geturlpara.getUrlKey("unid")
                console.log(unid)
                sessionStorage.setItem('WapEnterpriseUnid', JSON.stringify({
                    unid: unid
                }));
            },
            shows: function(item) {
                item == !item
            },
            /*食品安全 */
            FoodSafety() {
                let options = {
                    params: {
                        whereValue: '',
                        currentPage: 1,
                        pageSize: 10
    
                    }
                }
                //调取接口
                ConsumerTipsData(options).then((res) => {
                    if (res.success === true) {
                        this.FoodSafetyData = res.data
                    }
                })
            },
            /*添加剂 */
            FoodAdditives() {
                let options = {
                    params: {
                        enterpriseUnid: JSON.parse(sessionStorage.getItem('WapEnterpriseUnid')).unid,
                        currentPage: 1,
                        pageSize: 10
                    }
                }
                //调取接口
                FoodAdditivesData(options).then((res) => {
                    if (res.success === true) {
                        this.AdditivesData = res.data
                    }
                })
            },
            /*健康证人员 */
            EnterprisePerson() {
                let options = {
                    params: {
                        enterpriseUnid: JSON.parse(sessionStorage.getItem('WapEnterpriseUnid')).unid,
                        currentPage: 1,
                        pageSize: 10
                    }
                }
                //调取接口
                EnterprisePersonData(options).then((res) => {
                    if (res.success === true) {
                        this.PersonData = res.data
                    }
                })
            },
            /*企业相关信息 */
            Infos() {
                let options = {
                    params: {
                        unid: JSON.parse(sessionStorage.getItem('WapEnterpriseUnid')).unid,
                    }
                }
                //调取接口
                SingleEnterprise(options).then((res) => {
                    if (res.success === true) {
                      
                        this.InfosData = res.data;
                          this.videotype=this.InfosData.transformationType;
                        this.info.code = this.InfosData.permits[0].code;
                        this.info.beProject = this.InfosData.permits[0].beProject
                        this.info.gov = this.InfosData.govDepartment.parent.parent.name
                        this.info.govDepartmentname = this.InfosData.govDepartment.name
                        this.info.institutionPersonName = this.InfosData.institutionPersonName
                        this.info.startDate = this.InfosData.permits[0].startDate
                        this.info.endDate = this.InfosData.permits[0].endDate
                        this.economicType = this.InfosData.permits[0].economicType
                        this.config_CreditLevelUnid = this.InfosData.config_CreditLevelUnid
                        this.dynamicCreditLevelUnid = this.InfosData.dynamicCreditLevelUnid
                        // this.InfosData.config_CreditLevelUnid=this.InfosData.config_CreditLevelUnid
                        if (this.economicType == 1 || this.economicType == 2 || this.economicType == 7 || this.economicType == 8) {
                            this.activeNames = ['1']
                        } else {
                            this.activeNames.push('4')
                        }
                        sessionStorage.setItem('Wapvideo', JSON.stringify({
                            type: res.data.transformationType
                        }));
    
                    }
                })
            },
            /*检查次数 */
            CheckNumber() {
                let options = {
                    params: {
                        unid: JSON.parse(sessionStorage.getItem('WapEnterpriseUnid')).unid,
                    }
                }
                //调取接口
                SingleEnterpriseCheckNumber(options).then((res) => {
    
                    if (res.success === true) {
                        this.CheckNumberData = res.data
    
                    }
                })
            }
        },
        mounted() {
            this.FoodSafety();
            this.FoodAdditives();
            this.EnterprisePerson();
         //   this.Infos();
            this.CheckNumber()
    
        }
    }
</script>

<style lang="scss">
    .Unit_qualiy {
        padding: 10px;
        ul li {
            color: #747575;
            font-size: 0.8rem;
            margin-bottom: 5px;
            label {
                margin-left: 5px;
            }
        }
        .unit_title {
            color: #494949;
            font-size: 0.95rem;
        }
    }
    
    
    /*****************************面板一*********************************/
    
    .Health_certificate li,
    .Additive {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.34);
    }
    
    .Health_img {
        width: 6rem;
        margin-right: 10px;
    }
    
    .Health_content,
    .Additive_content {
        font-size: 14px;
        p {
            margin: 0px 0px 5px 0px;
            color: #747575;
        }
    }
    
    .Food_Safety {
        li {
            padding: 10px;
            border-bottom: 1px solid #dde4e2;
        }
        p {
            margin: 0 0 10px 0px;
            font-size: .95rem;
            color: #494949;
        }
        .Food_Safety_content {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
    }
    
    .Food_Safety_img {
        width: 4rem;
        margin: 0px 10px 0px 0px;
    }
    
    .Food_Safety_text {
        color: #747575;
        font-size: .9rem;
        width: 100%;
        time {
            font-size: 0.7rem;
        }
    }
    
    .el-collapse-item__header {
        color: #fff;
        font-size: .95rem;
        padding: 0px 10px;
        border: none;
        height: 45px;
        line-height: 45px;
        overflow: hidden;
        img {
            width: 23px;
            vertical-align: middle;
            margin-left: 20px;
            margin-right: 10px;
        }
    }
    
    .el-collapse-item:first-child .el-collapse-item__header {
        background: -webkit-linear-gradient(#a5adf7, #7e87d1);
        background: -o-linear-gradient(#a5adf7, #7e87d1);
        background: -moz-linear-gradient(#a5adf7, #7e87d1);
        background: linear-gradient(#a5adf7, #7e87d1);
    }
    
    .el-collapse-item:nth-child(2) .el-collapse-item__header {
        background: -webkit-linear-gradient(#52b8e4, #0b87c5);
        background: -o-linear-gradient(#52b8e4, #0b87c5);
        background: -moz-linear-gradient(#52b8e4, #0b87c5);
        background: linear-gradient(#52b8e4, #0b87c5);
    }
    
    .el-collapse-item:nth-child(3) .el-collapse-item__header {
        background: -webkit-linear-gradient(#6fa0de, #597ec1);
        background: -o-linear-gradient(#6fa0de, #597ec1);
        background: -moz-linear-gradient(#6fa0de, #597ec1);
        background: linear-gradient(#6fa0de, #597ec1);
    }
    
    .el-collapse-item:nth-child(4) .el-collapse-item__header {
        background: -webkit-linear-gradient(#55d48b, #2cb165);
        background: -o-linear-gradient(#55d48b, #2cb165);
        background: -moz-linear-gradient(#55d48b, #2cb165);
        background: linear-gradient(#55d48b, #2cb165);
    }
    
    .el-icon-arrow-right {
        font-size: 1.5rem;
    }
    
    .el-collapse-item__wrap {
        background: #eef7f5
    }
    
    .el-collapse-item__content {
        padding-bottom: 0
    }
    
    .el-collapse {
        margin-bottom: 55px;
    }
    
    .none_data {
        width: 35%;
        margin: 10px auto;
    }
</style>
